<template>
    <div class="home">
            <aside class='aside_show' v-if='isFold'>
                <ul class='nav'>
                    <li @click='isActive=1'>
                        <span class='title' @click='showMatch' :class='{isActive:isActive==1}'><i class='iconfont icon-ios-tennisball'></i>赛事管理<i class='iconfont icon-right' :class='{rotate:isMatch}' ></i></span>
                        <ul style='height:0;transition:.5s;overflow:hidden' class='noMatch' :class="{isMatch:isMatch}">
                           <li @click="toMatchList" >
                                赛事列表
                            </li>
                            <li @click="toAddMatch">
                                添加赛事
                            </li>
                        </ul>
                    </li>
                    <li @click='isActive=2' :class='{isActive:isActive==2}'>

                        <span class='title'> <i class='iconfont icon-edit'></i>试题管理<i class='iconfont icon-right'></i></span>
                    </li>
                    <li @click='isActive=3' :class='{isActive:isActive==3}'>

                        <span class='title'> <i class='iconfont icon-peoplefill'></i>用户管理<i class='iconfont icon-right'></i></span>
                    </li>
                    <li @click='isActive=4' :class='{isActive:isActive==4}'>

                        <span class='title'> <i class='iconfont icon-permissions-user'></i>权限管理<i class='iconfont icon-right'></i></span>
                    </li>
                </ul>
            </aside>
            <aside class='aside_hide' v-else='isFold'>
                <ul class='nav'>
                    <el-tooltip class="item" effect="dark" content="赛事管理" placement="right">
                        <li @click='isActive=1' :class='{isActive:isActive==1}'>
                            <i class='iconfont icon-ios-tennisball'></i>
                        </li>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="试题管理" placement="right">
                        <li @click='isActive=2' :class='{isActive:isActive==2}'>
                            <i class='iconfont icon-edit'></i>
                        </li>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="用户管理" placement="right">
                        <li @click='isActive=3' :class='{isActive:isActive==3}'>
                            <i class='iconfont icon-peoplefill'></i>
                        </li>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="权限管理" placement="right">
                        <li @click='isActive=4' :class='{isActive:isActive==4}'>
                             <i class='iconfont icon-permissions-user'></i>
                        </li>
                    </el-tooltip>
                </ul>
            </aside>
            <div class="body">
                <header>
                    <div class="left">
                        <i class='iconfont icon-caidan ' @click='fold'></i>
                        <span class='title'>中奥网球赛事管理系统</span>
                    </div>
                    <div class="right">
                        <i class='iconfont icon-peoplefill'></i>
                        <span class='user'>用户名：admin</span> <span class='liner'>|</span><span class='identify'>管理员</span>
                    </div>
                </header>
                <div class="guide">
                   <el-breadcrumb separator-class="el-icon-arrow-right" style='line-height:35px;'>
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

                    </el-breadcrumb>
                </div>
                <div class="main">
                    <el-scrollbar style='height:100%'>
                        <router-view id='my-scrollbar'>

                        </router-view>
                    </el-scrollbar>
                </div>
            </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                isFold:true,
                isMatch:false,
                isActive:'',
                myBarOption:{
                    barColor:"red"
                }
            }
        },
        methods:{
            fold(){
                if(this.isFold){
                    var body = document.getElementsByClassName('body')[0];
                    body.style.width='calc(100% - 32px)'
                }else{
                    var body = document.getElementsByClassName('body')[0];
                    body.style.width='calc(100% - 120px)'
                }
                this.isFold=!this.isFold
            },
            showMatch(){
                this.isMatch=!this.isMatch
            },
            toMatchList(){
                this.$router.push('/Index/Match/')
            },
            toAddMatch(){
                this.$router.push('/Index/Match/AddNewMatch')
            },
        }
    }
</script>
<style lang="less" scoped>
//
.isActive{
    color:rgb(64, 158, 255);
}
.isMatch{
    height: 60px!important;
}
.icon-right::before{
    display: inline-block;
    transition: all .3s;
}
.rotate:before{
    transform: rotate(90deg);
}
//
//
.home{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .aside_show{
        transition: width .2s;
        font-size:16px;
        position: fixed;
        top:0;
        left:0;
        height: 100%;
        width: 120px;
        background-color: rgb(48, 65, 86);
        color:#fff;
        .nav{
            li{
                padding:6px 0;
                width:120px;
                text-align: center;
                cursor: pointer;
                transition: border-color .3s,background-color .3s,color .3s;
                .iconfont{
                    margin-right:5px;
                    font-size:18px;
                }
                .iconfont::before{
                    vertical-align: middle;
                }
                .title{
                    font-size: 14px;
                    line-height: 40px;
                }
                .title:hover{
                    color:rgb(64, 158, 255);
                }
                .noMatch{
                    font-size:14px;
                    width: 100%;
                    li{
                        height: 20px;
                        line-height: 20px;
                    }
                    li:hover{
                        background-color:#607488;
                        color:rgb(64, 158, 255);
                    }
                }
            }
            // li:hover{
            //     background-color:#607488;
            //     color:rgb(64, 158, 255);
            // }
        }
    }
    .aside_hide{
        transition: width .2s;
        font-size:16px;
        position: fixed;
        top:0;
        left:0;
        height: 100%;
        width: 32px;
        background-color: rgb(48, 65, 86);;
        color:#fff;
        .nav{
            li{
                height: 56px;
                line-height: 56px;
                cursor: pointer;
                text-align: center;
                transition: border-color .3s,background-color .3s,color .3s;
                .iconfont{
                    margin-right:5px;
                    font-size:18px;
                }
            }
            li:hover{
                background-color:#607488;
                color:rgb(64, 158, 255);
            }
        }
    }
    .body{
        transition: width .2s;
        float: right;
        width: calc(100vw - 120px);
        height: 100%;
        background-color: #fff;
        header{
            width: 100%;
            height: 50px;
            border-bottom:1px solid #eaeaea;
            line-height: 50px;
            font-size:18px;
            display: flex;
            justify-content: space-between;
            .left{
                .iconfont{
                    font-size: 26px;
                    margin-left:10px;
                    cursor: pointer;
                }
                .title{
                    margin-left:10px;
                    display: inline-block;
                    vertical-align: top;
                }
            }
            .right{
                padding-right:20px;
                font-size:16px;
                line-height: 50px;
                .iconfont{
                    font-size: 18px;
                }
                .liner{
                    margin:0 8px;
                    font-size:14px;
                }
                .identify{
                    font-size: 14px;
                }
            }
        }
        .guide{
            height: 35px;
            width: 100%;
            border-bottom:1px solid  #eaeaea;
            line-height: 33px;
            padding-left:10px;
            box-sizing: border-box;
            color:#727272;
        }
        .main{
            width: 100%;
            height: calc(100% - 87px);
        }
    }
}
</style>
